<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="${ctxStatic}/layer/layer.js"></script>
<script src="${ctxStatic}/js/widget/spark-md5.min.js"></script>
<div id="importBox" >
<form id="importForm" target="_parent" action="${ctx}/sys/customer/impt/customerImport/import" method="post" enctype="multipart/form-data" class="form-search" style="padding-left:20px;text-align:center;"><br/>
<div style="text-align: center;">
         <input style="text-align: center;width:180px"  name="file" id="im_file" type="file"/>
          <input id="btnImportSubmit" class="btn btn-primary" type="submit" value=" 导入 "/>
          </div>
   </form>
<div style="padding: 10px;text-align: center">
      	模板：
       	<select style="width: 150px;" name="select-name">
            	<option value="1">【车辆信息】模板</option>
         <option value="2">【房产信息】模板</option>
           	<option value="3">【信息不全】模板</option>
           </select>&nbsp;&nbsp;&nbsp;
      <button class="btn btn-info download_template">下载</button>
       </div>
   	</div>
<script>
    var isMd5Exist=false;
    function getMd5(md5){
        $.ajax({
            type : 'post',
            traditional: true,
            url : "${ctx}/sys/customer/impt/customerImport/isMd5Exist",
            async : false, //默认为true 异步
            data : {"md5":md5},
            cache : false,
            dataType : 'json',
            success : function(data) {
                isMd5Exist=data;
            }
        });
        layer.closeAll();
    }
    function  calculateMd5(file,callBack) {
        var fileReader = new FileReader(),
                blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
                chunkSize = 2097152,
                // read in chunks of 2MB
                chunks = Math.ceil(file.size / chunkSize),
                currentChunk = 0,
                spark = new SparkMD5();

        fileReader.onload = function(e) {
            spark.appendBinary(e.target.result); // append binary string
            currentChunk++;

            if (currentChunk < chunks) {
                loadNext();
            }
            else {
                callBack(spark.end());
            }
        };
        function loadNext() {
            var start = currentChunk * chunkSize,
                    end = start + chunkSize >= file.size ? file.size : start + chunkSize;
            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
        };
        loadNext();
    }
    //下载模板
    $("body").on("click",".download_template",function () {
        var type=$("select[name='select-name']").val();
        window.location.href=ctx+"/sys/customer/impt/customerImport/import/template?type="+type;
    });
    $("body").on("click","#btnImportSubmit",function(){
        $("#importForm").submit();
    });
    $("body").on("change","#im_file",function(){
        var file=$(this).prop('files')[0];
        //loading层
        layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        calculateMd5(file,getMd5);
        layer.closeAll();
    });
    $("body").on("submit","#importForm",function(){
        if(isMd5Exist){
            layer.alert("该文件已导入过，请更换文件进行导入",-1);
            return false;
        }else{
            loading('正在导入，请稍等...');
        }
    })
</script>